<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>别踩白块</title>
    <style>
        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        body {
            margin: 0;
            width: 100%;
            height: 100vh;
            font-family: "Exo", sans-serif;
            color: #fff;
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            position: relative;
        }
        .back {
            width: 420px;
            height: 575px;
            border: 1px solid black;
            position: absolute;
            top: 150px;
            left: 600px;
        }
        .text {
            position: absolute;
            top: 25px;
            left: 750px;
        }
        .text .st {
            color:black;
            text-indent: 25px;
        }
        .form tr {
            background-color: #fff;
        }
        
        td{
            width: 140px;
            height: 140px;
        }
    </style>
</head>
<body>
    <div class="text">
        <h1>别踩白块</h1>
        <div class="st">
            <div id="score">0</div><div id="time">00.00.00</div>
        </div>
    </div>
    <div id="back" class="back">
        <table id="form" class="form">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>开始</td>
                <td>开始</td>
                <td>开始</td>
            </tr>
        </table>
    </div>
    <script>
        // 初始化
        var body = document.documentElement;
        var mis = 0;
        var sec = 0;
        var min = 0;
        var score = 0;
        var bool = true;
        var int;
        // 获取时间的id
        var time = document.getElementById('time');
        // 获取分数的id
        var sco = document.getElementById('score');
        // 获取表格
        var form1 = document.getElementById('form')[0];
        // 随机生成颜色位置
        var tr = document.getElementsByTagName('tr');
        tr[0].children[Math.ceil(Math.random()*3)-1].style.backgroundColor = 'black';// 4/1
        tr[1].children[Math.ceil(Math.random()*3)-1].style.backgroundColor = 'black';// 4/2
        tr[2].children[Math.ceil(Math.random()*3)-1].style.backgroundColor = 'black';// 4/3
        tr[3].children[Math.ceil(Math.random()*3)-1].style.backgroundColor = 'black';// 4/4

        // 向表格插入
        function addtr(){
            // 插入一行
            form.insertRow(0);
            // 插入三列
                for(var i=0;i<3;i++){
                    tr[0].insertCell();
                }
                tr[0].children[Math.ceil(Math.random()*3)-1].style.backgroundColor = 'black';
            }
        // 删除尾行
        function del(){
            tr[4].remove();
        }
        // 绑定敲击事件
        body.addEventListener('keydown',function(event){
            // 事件开始和结束
            if(bool == true && (event.key == 'ArrowLeft' || event.key == 'ArrowDown' || event.key == 'ArrowRight')){
                int = setInterval(times,10);
                bool = false;
            }
            switch(event.key){
                case 'ArrowLeft':
                    if(tr[3].children[0].style.backgroundColor == 'black'){
                        addtr();
                        del();
                        scores();
                    }
                    else{
                        over();
                        begin();
                    }
                    break;
                case 'ArrowDown':
                    if(tr[3].children[1].style.backgroundColor == 'black'){
                        addtr();
                        del();
                        scores();
                    }
                    else{
                        over();
                        begin();
                    }
                    break;
                case 'ArrowRight':
                    if(tr[3].children[2].style.backgroundColor == 'black'){
                        addtr();
                        del();
                        scores();
                    }
                    else{
                        over();
                        begin();
                    }
                    break;
            }
        });
        // 分数
        function scores(){
            score+=1;
            sco.innerHTML = score;
        }
        // 计时器
        function over(){
            alert('游戏结束,得分：'+ score +';用时'+time.innerHTML);
            clearInterval(int);
            mis = 0;    
            sec = 0;
            min = 0;
            score=0;
            sco.innerHTML=score;
            bool=true;
        }
        function begin(){
            time.innerHTML = (min < 10 ? "0" + min :min) + ":" +(sec < 10 ? "0" + sec :sec) + ":" + (mis < 10 ? "0" + mis :mis);
        }
        function times(){
            mis+=1;
            if(mis>99){
                mis=0;
                sec+=1;
            }
            if(sec>59){
                sec=0;
                min+=1;
            }
            if(min>23){
                min=0;
            }
            begin();
        }
    </script>
</body>
</html>